<template>
	<!-- 支付结果 -->
	<view style="height: 100vh;display: flex;flex-direction: column;">
		<view style="flex: 1;" />
		<view class="Top">
			<image src="/static/Mall/支付成功.png"></image>
			<text>支付成功</text>
			<view><text class="iconfont .icon-zhifufangshi" /><text>支付方式</text><text>{{PayType}}</text></view>
			<view><text class="iconfont .icon-jine" /><text>支付金额</text><text>￥{{PayMoney}}</text></view>
			<view><text>消耗积分</text><text>{{useJifen}}</text></view>
			<view><text>获得积分</text><text>{{addJifen}}</text></view>
			<text @click="Back">返回</text>
		</view>
		<view class="Bottom">
			<text>温馨提示：</text>
			<text>平台不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作。</text>
		</view>
		<view style="flex: 3;" />
	</view>
</template>

<script>
	import {
		reactive
	} from 'vue';
	import store from '../../store/index.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	export default {
		setup() {
			let data = reactive({
				PayType: "",
				PayMoney: 0,
				useJifen: 0,
				addJifen: 0,
				Back: function() {
					uni.navigateBack({
						delta: 3
					});
				}
			});
			onLoad((option) => {
				data.PayType = Number(option.PayType) == 1 ? '微信' : Number(option.PayType) == 2 ? '支付宝' : 'Null';
				data.PayMoney = Number(option.PayMoney);
				data.useJifen = Number(option.use);
				data.addJifen = Number(option.add);
			})
			return data;
		}
	}
</script>

<style>
	@import url('~@/static/Mall/iconfont.css');

	.Top {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #999999;
	}

	.Top>image {
		width: 200rpx;
		height: 200rpx;
		margin: 20rpx 0;
	}

	.Top>text:nth-of-type(1) {
		font-size: 40rpx;
		margin: 20rpx 0;
	}

	.Top>view {
		margin-top: 20rpx;
	}

	.Top>view>text:nth-child(2) {
		margin: 0 20rpx;
	}

	.Top>view>text:last-child {
		color: #FF0000;
	}

	.Top>text:nth-of-type(2) {
		margin: 40rpx 0 0 0;
		padding: 20rpx 80rpx;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
	}

	.Bottom {
		display: flex;
		flex-direction: column;
		margin-top: 80rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		line-height: 150%;
		color: #999999;
	}

	.Bottom>text:nth-child(2) {
		text-indent: 2em;
	}
</style>
